<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title></title>
        <script src="js/vue.global.js"></script>
		<script src="js/axios.min.js"></script>
    </head>
	<style>
		* {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        #app {
            width: 100%;
            padding: 20px;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* 图片之间的间隙 */
            list-style: none;
        }
        li {
            width: calc(25% - 10px); /* 每行四个，减去间隙 */
            aspect-ratio: 1; /* 保持正方形 */
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        li img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        li p {
            text-align: center;
            margin: 10px 0;
            font-size: 14px;
            color: #333;
        }
	</style>
    <body>
        <div id="app">
            <ul>
				<li v-for="item in list">
					<div>
						<img width="100%"  :src="'//images.weserv.nl/?url='+item.image.medium" alt="">
					</div>
					<p>{{item.name}}</p>
				</li>
			</ul>
        </div>
        <script>
            Vue.createApp({
                data() {
                    return {
                        list:[]
                    }
                },
				created(){
					this.getData()
				},
				methods:{
					getData(){
						axios.get('https://www.skypixel.com/api/v2/tags')
						.then(res => {
							console.log('请求成功');
							console.log(res)
							this.list=res.data.data.items
						})
						.catch(err => {
							//请求失败
							console.log('请求失败' + err)
						})
						.finally(() => {
							console.log('请求完成')
						})
					}
				}
            }).mount('#app')
        </script>
    </body>
</html>